{include file="public/user_header" /}

<!-- 显示图片模态框 -->
<div class="modal fade" id="bigImgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style="top:10%;left: 5%;" role="document">
        <div class="modal-content" style="width: 410px;padding: 0 10px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" style="height: 100%;width: 100%;text-align: center;">
                <div style="width: 360px;height: 350px;">
                    <img id="bigImg" src="" alt="暂无" style="width: 100%;height: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- /显示图片模态框 -->

<!--批量删除商品-->
<div class="modal fade" tabindex="-1" role="dialog" id="deleteMultyTip" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                确认删除选择的商品！
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="deleteMultySure()">确定</button>
            </div>
        </div>
    </div>
</div>
<!--是否勾选商品提示-->
<div class="modal fade" tabindex="-1" role="dialog" id="selectItemTip" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                请选择要删除的商品！
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="box box-warning">
    <div class="box-body">
        <!-- 数据表格 -->
        <div class="table-box">
            </div>
            <!--数据列表-->
            <table id="dataList" class="table table-hover table-striped table-bordered"
                   data-sort-name="ID"
                   style="table-layout: fixed;word-break: break-all;"
            >
            </table>
            <!--数据列表/-->
        </div>
        <!-- 数据表格 /-->

    <div class="panel panel-default">
        <div class="panel-body bottom-menu-include">
            <div class="col-md-1 bottom-menu">
				<span id="deleteMulty">
                    <button class="btn btn-danger" onclick="btnDel()">删除所选</button>
				</span>
            </div>
            <div class="col-md-7 bottom-menu">

            </div>
            <div class="col-md-2 bottom-menu">
                <span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
            </div>
            <div class="col-md-1 bottom-menu">
                <span>合计：<span id="selectGoodsMoney">0.00</span>元</span>
            </div>
            <div class="col-md-1 bottom-menu submitData submitDis">
                <button type="button" onclick="btnPay()" class="btn btn-warning">结算</button>
            </div>
        </div>
    </div>
    </div>
    <!-- /.box-body -->
</div>

<!-- 引入js依赖 -->
{include file="public/introduce" /}
<script>

    $table = $('#dataList');

$(function (){

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index) {

        var span = document.createElement("span");
        span.setAttribute("title", value);
        span.innerHTML = value;

        return span.outerHTML;
    }
    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": "nowrap",
                "text-overflow": "ellipsis",
                "overflow": "hidden",
                "max-width": "60px"
            }
        }
    }

    //计算并赋值所选数量和总价
    function count() {
        var rows = $table.bootstrapTable('getSelections');
        var totalPrice = 0.0;
        var num = rows.length;
        $(rows).each(function() {  // 遍历选中行
            totalPrice = totalPrice + parseFloat( document.getElementById(this.ID+'_totalPrice').innerText )
        });

        document.getElementById('selectGoodsCount').innerText = num;
        document.getElementById('selectGoodsMoney').innerText = totalPrice;
    }

    //表格赋值
    $table.bootstrapTable({
        method: "post",
        url: "../user/getCart",
        striped: true, // 是否显示行间隔色
        pageNumber: 1, // 初始化加载第一页
        pagination: false, // 是否分页
        search: false, //搜索
        sortOrder: "desc",     //排序方式
        sidePagination: 'client', // server:服务器端分页|client：前端分页

        //选中事件
        onCheck: function (row) {
            // console.log('check');
            count();
        },
        //选中全部事件
        onCheckAll: function (row) {
            // console.log('checkAll');
            count();
        },
        //取消选中事件
        onUncheck: function (row){
            // console.log('onUncheck');
            count();
        },
        //全部取消选中事件
        onUncheckAll: function (row){
            // console.log('onUncheckAll');
            document.getElementById('selectGoodsCount').innerText = 0;
            document.getElementById('selectGoodsMoney').innerText = 0.00;
        },

        queryParams: function(params) { // 上传服务器的参数
            var temp = {
                name: $("#sname").val(),
                viewReason: $("#viewReason").val(),
            };
            return temp;

        },

        columns: [
            {checkbox: true},
            {
                title: '产品图片',
                field: 'gImg',
                cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "text-align": "center",
                            "height": "100%",
                            "width": "120px"
                        }
                    }
                },
                formatter : function (value, row, index) {
                    // __PUBLIC__ 会报错
                    //  __STATIC__/../ => public 文件夹
                    var img_src = "__STATIC__/../uploads/goodsImg/"+value;
                    return "<a href='#' onclick='BigImg("+index+")'><img style='width: 110px;height: 80px;' src='"+img_src+"' alt='暂无图片'></a>"
                }
            },
            {field:'gName', title:'产品名称', width:10,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,
                width: 300
            },
            {title:'产品参数',
                formatter: function (value, row, index){
                    return "<span>质量："+row.gQuality+"&emsp;&emsp;等级："+row.gGrade+"</span>"
                },
                width: 200
            },
            {field:'gPrice', title:'单价',
            formatter: function (value, row, index){
                return "<i class='fa fa-jpy'></i>"+value
            }
            },
            {field:'num', title:'数量',
            formatter: function (value, row, index) {
                return "<button class=\"btn btn-sm \" onclick='minusNum("+index+")' type=\"button\"><i class=\"fa fa-caret-down\"></i></button>" +
                    "<input type=\"text\" id='"+row.ID+"_num' onchange='changNum("+index+")' oninput=\"if(!/^[0-9]+$/.test(value)) value=value.replace(/\\D/g,'');if(value<0)value=0\" min='0' style='width: 40px;border: 1px solid grey; height: 27px;' value="+value+">" +
                    "<button class=\"btn btn-sm add\" type=\"button\" onclick='addNum("+index+")'><i class=\"fa fa-caret-up\"></i></button>"
            }
            },
            { title:'总价',
                formatter: function (value, row, index) {
                    return "<span>￥</span><span class=\"single-total\" id='"+row.ID+"_totalPrice'>" + row.gPrice*row.num + "</span>"
                },},
        ],
    })
});

    //查看大图
    function BigImg(index){
        var row = $table.bootstrapTable('getData')[index];
        $('#bigImg').attr('src',"__STATIC__/../uploads/goodsImg/"+row.gImg);
        $('#bigImgModal').modal();
    }

    //加减数量
    function addNum(val){
        var row = $table.bootstrapTable('getData')[val];
        // console.log(document.getElementById(row.ID+'_num').value)
        var num_node = document.getElementById(row.ID+'_num');
        var totalPrice_node = document.getElementById(row.ID+'_totalPrice')
        var num = parseInt(num_node.value);
        var totalPrice = parseFloat(totalPrice_node.innerText);
        // console.log(totalPrice);

        num = num + 1;
        totalPrice = num * parseFloat(row.gPrice);

        num_node.setAttribute('value',num);
        totalPrice_node.innerText = totalPrice;

        $.ajax({
            url:"../user/addNum",
            data: {"ID":row.ID},
            async: true,
            type: "post"
        })
    }
    function minusNum(val){
        var row = $table.bootstrapTable('getData')[val];
        // console.log(document.getElementById(row.ID+'_num').value)
        var num_node = document.getElementById(row.ID+'_num');
        var totalPrice_node = document.getElementById(row.ID+'_totalPrice')
        var num = parseInt(num_node.value);
        var totalPrice = parseFloat(totalPrice_node.innerText);
        // console.log(totalPrice);

        if(num == 0) return;
        num = num - 1;
        totalPrice = num * parseFloat(row.gPrice);

        num_node.setAttribute('value',num);
        totalPrice_node.innerText = totalPrice;

        $.ajax({
            url:"../user/minusNum",
            data: {"ID":row.ID},
            async: true,
            type: "post"
        })
    }

    //直接输入修改数量
    function changNum(val){
        var row = $table.bootstrapTable('getData')[val];
        var num_node = document.getElementById(row.ID+'_num');
        var totalPrice_node = document.getElementById(row.ID+'_totalPrice')

        var num = parseInt(num_node.value);
        if (num>=0){
            num_node.setAttribute('value',num);
            totalPrice = num * parseFloat(row.gPrice);
            totalPrice_node.innerText = totalPrice;
            $.ajax({
                url:"../user/changeNum",
                data: {"ID":row.ID,'num':num},
                async: true,
                type: "post"
            })
        }
    }

    //点击删除所选按钮
    function btnDel(){
        var rows = $table.bootstrapTable('getSelections');// 获得要删除的数据
        if (rows.length == 0) $('#selectItemTip').modal('show');
        else{
            $('#deleteMultyTip').modal('show')
        }
    }

    //点击确认删除按钮
    function deleteMultySure(){
        var rows = $table.bootstrapTable('getSelections');// 获得要删除的数据
        var ids = new Array();  // 声明一个数组
        $(rows).each(function() {  // 遍历选中行
            ids.push(this.ID);  // gID为获得到的整条数据中的一列，将其放入数组中
        });
        deleteMs(ids); //调用删除操作函数
    }
    /* 进行删除操作的函数 */
    function deleteMs(ids){
    $.ajax({
        url: "../user/doDelete",
        type: "post",
        data: "ids="+ids,
        dataType: "json",
        async: false,
        success: function(result) { //刷新表格
            $('#deleteMultyTip').modal('hide')
            alert("已成功删除！");
            $table.bootstrapTable('refresh', {
                url : '../user/getCart'
            });
        }
    })
}

    /* 结算按钮 */
    function btnPay(){
        var rows = $table.bootstrapTable('getSelections');// 获得要结算的数据
        var ids = new Array();  // 声明一个数组
        $(rows).each(function() {  // 遍历选中行
            ids.push(this.ID);  // gID为获得到的整条数据中的一列，将其放入数组中
        });

        var action = "{:url('pay')}";
        form = $("<form></form>")
        form.attr('action',action)
        form.attr('method','post')
        input1 = $("<input type='hidden' name='ids' />")
        input1.attr('value',ids)
        form.append(input1)
        form.appendTo("body")
        form.css('display','none')
        form.submit()
    }

</script>

</body>

</html>